<template>
  <div class="run-modal-style">
    <Form :model="modelForm" ref="editForm" class="ivu-form-no-margin-bottom" :rules="rule" :label-width="100">
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
        <Form-item prop="name" label="用户名">
          <Input placeholder="" size="small" v-model="modelForm.name" maxlength="50"></Input>
        </Form-item>
        </Col>
        <Col span="12" style="border:none;">
        <Form-item prop="sex" label="性别">
          <RadioGroup v-model="modelForm.sex" size="small">
            <Radio label="男"></Radio>
            <Radio label="女"></Radio>
          </RadioGroup>
        </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
        <Form-item prop="age" label="年龄">
          <InputNumber :max="150" :min="1" v-model="modelForm.age" size="small"></InputNumber>
        </Form-item>
        </Col>
        <Col span="12" style="border:none;">
        <Form-item prop="dateOfBirth" label="生日">
          <DatePicker type="date" :value="modelForm.dateOfBirth" placeholder="选择日期" style="width: 200px" size="small" @on-change="dateOfBirthChange" transfer="true"></DatePicker>
        </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
        <Form-item prop="favorites" label="喜好">
          <CheckboxGroup v-model="modelForm.favorites" size="small">
            <Checkbox label="香蕉"></Checkbox>
            <Checkbox label="苹果"></Checkbox>
            <Checkbox label="西瓜"></Checkbox>
          </CheckboxGroup>
        </Form-item>
        </Col>
        <Col span="12" style="border:none;">
        <Form-item prop="educationDegree" label="交通工具">
          <Select-Value-Set v-model="modelForm.educationDegree" code="VEHICLE" :onValueSetChange="onValueSetChange"></Select-Value-Set>
        </Form-item>
        </Col>
      </Row>
      <Row :gutter="20" class="code-row-bg">
        <Col span="12" style="border:none;">
        <Form-item prop="preferredLanguage" :label="$t('common.status')">
          <Select size="small" v-model="modelForm.preferredLanguage" transfer="true">
            <Option :title="$t('common.valid')" value="0" key="0">{{$t('common.valid')}}</Option>
            <Option :title="$t('common.invalid')" value="1" key="1">{{$t('common.invalid')}}</Option>
          </Select>
        </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return "";
      }
    },
    version: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      modelForm: {
        id: this.id,
        name: "",
        sex: "",
        age: 0,
        dateOfBirth: "",
        favorites: [],
        educationDegree: "",
        preferredLanguage: 0
      },
      rule: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        dateOfBirth: [
          { required: true, message: "请输入生日", trigger: "change" }
        ]
      }
    };
  },
  computed: {},
  created: function() {
    if (this.id) {
      this.$emit("SetTitle", "编辑用户");
    } else {
      this.$emit("SetTitle", "新增用户");
    }
    this.$emit("SetPageSize", 700);
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        handle: () => {
          this.save();
        }
      },
      {
        text: this.$t("common.close"),
        theme: "primary",
        handle: () => {
          this.$emit("Close");
        }
      }
    ]);
  },
  beforeMount: function() {},
  mounted: function() {
    this.init();
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    init() {
      if (this.id) {
        $store.dispatch("GetUserDetail", { id: this.id }).then(response => {
          this.modelForm = {
            id: response.id,
            sex: response.sex,
            name: response.name,
            preferredLanguage: response.preferredLanguage,
            orgId: response.orgId,
            age: response.age,
            dateOfBirth: response.dateOfBirth,
            favorites: response.favorites ? response.favorites : [],
            educationDegree: response.educationDegree,
            version: this.version
          };
        });
      }
    },
    save() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          if (this.id) {
            $store
              .dispatch("UpdateUser", this.modelForm)
              .then(response => {
                this.$Message.success({
                  content: this.$t("common.warning.editSuccess"),
                  duration: 3
                });
                this.$emit("Close", 1);
              })
              .catch(data => {
                this.$Message.warning({
                  content: data.message,
                  duration: 3
                });
              });
          } else {
            $store
              .dispatch("AddUser", this.modelForm)
              .then(response => {
                this.$Message.success({
                  content: this.$t("common.warning.createSuccess"),
                  duration: 3
                });
                this.$emit("Close", 1);
              })
              .catch(function(data) {
                this.$Message.warning({
                  content: data.message,
                  duration: 3
                });
              });
          }
        } else {
          this.$Message.error({
            content: this.$t("common.warning.formValidateFailed"),
            duration: 3
          });
          return 0;
        }
      });
    },
    dateOfBirthChange(data) {
      this.modelForm.dateOfBirth = data;
    }
  },
  watch: {},
  directives: {}
};
</script>
